<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="../pic/icomoon-v1.0/style.css">
    <link rel="stylesheet" href="./city.css">
</head>

<body>

    <div id="title">
        <h2 class="title">
            <div class="icon-close"></div>
            <div>当前城市</div>
        </h2>
        <div class="search">
            <i class="icon-sousuo"></i>
            <input type="text" placeholder="输入城市名或拼音">
        </div>
    </div>
    <div id="hotcity">
        <div>热门城市</div>
        <ul class="hotcityLi">

        </ul>
    </div>
    <div class="citylist">
        <div id="A">A</div>
        <ul>
            <li>鞍山</li>
            <li>安庆</li>
            <li>安阳</li>
            <li>安顺</li>
            <li>安康</li>
            <li>阿克苏地区</li>
        </ul>
    </div>

    <ul class="pinyin">
    </ul>

</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let _pinyin = document.getElementsByClassName('pinyin')[0]
    let _cityList = document.getElementsByClassName('citylist')[0]
    function getCity() {
        axios({
            url: 'https://m.maizuo.com/gateway',
            headers: {
                "X-Host": "mall.film-ticket.city.list"
            }
        }).then(res => {
            let list = res?.data?.data?.cities
            console.log(list)
            pinyin(list)
            content(list)
            Hot(list)
        })
    }
    //锚点创建
    function pinyin(list) {
        let firstLetter = [...new Set(list.map(item => item.pinyin.charAt(0).toUpperCase()))]
        // console.log(firstLetter)
        firstUpperLetter = firstLetter.sort()
        let image = ``
        firstLetter.forEach(item => {
            image += `
        <li><a href="#${item}">${item}</a></li>`
        })
        _pinyin.innerHTML = image
    }


    //内容创建
    function content(list) {
        let firstLetter = [...new Set(list.map(item => item.pinyin.charAt(0)))].sort()
        let a = firstLetter.map((item) => ({
            letter: item.toUpperCase(), // 添加首字母作为属性，而不是作为键  
            items: list.filter(_item => _item.pinyin.charAt(0) === item) // 获取对应首字母的项列表  
        }));
        console.log(a)
        let image = ``
        a.forEach(item => {
            image += `
            <div id="${item.letter}">${item.letter}</div>
        <ul>`

            item.items.forEach(_item => {
                image += `
            <li>${_item.name}</li>
            `
            })

            image +=
                `
            </ul>
                `
        })
        _cityList.innerHTML = image
    }
    getCity()

    //关闭按钮---------------------------------------------------------------------->需改进
    let close = document.getElementsByClassName('icon-close')[0]
    close.onclick = function () {
        window.open('./电影循环渲染.html')
    }


    //热门城市
    let hotCityLi = document.getElementsByClassName('hotcityLi')[0]
    function Hot(list) {
        let Hlist = list.filter(item => item.isHot === 1)
        console.log(Hlist)
        let image = ``
        Hlist.forEach(item => {
            image += `<li onclick = 'cityClick(${JSON.stringify(item)})' >${item.name}</li>`
        })
        hotCityLi.innerHTML = image
    }

    function cityClick(city) {
        localStorage.setItem('city', JSON.stringify(city))
        window.open('./电影循环渲染.html')
    }
</script>

</html>